<template>

<div>
  <div class="container">
        <div id="chart1" style="width: 600px; height: 400px;"></div>
        <div id="chart2" style="width: 600px; height: 400px;"></div>
  </div>
  <div class="container">
  <div id="chart3" style="width: 1800px; height: 400px; "></div>
</div>
</div>
</template>

<style>
        .container {
            display: flex;
        }
        
        #chart1, #chart2 {
            width: 600px;
            height: 400px;
        }

        #chart3 {
            width: 1800px;
            height: 400px;
        }

    </style>

<script>
import * as axios from 'axios'
import * as echarts from 'echarts'

export default {
  mounted() {
    this.initChart1()
    this.initChart2()
    this.initChart3()
  },
  methods: {
    initChart1() {
      const chart = echarts.init(document.getElementById('chart1'))
      axios.get('http://localhost:8080/product/echarts').then(res => {
        let retData = res.data.data;
        const options = {
          title: {
            text: '商品销量比例图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['销量']
          },
          xAxis: {
            type: 'category',
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {
            type: 'value'
            
          },
          series: [
            {
              name: '销量',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        }
        chart.setOption(options)
      })
    },
    initChart2() {
      const chart = echarts.init(document.getElementById('chart2'))
      axios.get('http://localhost:8080/product/echarts').then(res => {
        let retData = res.data.data;
        const options = {
          title: {
            text: '商品展示比例图'
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: ['是否展示']
          },
          xAxis: {
            type: 'category',
            data: retData.sexX
          },
          yAxis: {
            type: 'value'
          },
          // series: [
          //   {
          //     name: '是否展示',
          //     type: 'pie',
          //     data: retData.sexY
          //   }
          // ]


          series: [
        {
          name: '是否展示',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          // data: retData.sexY
          data: [
        {
          value: retData.sexY[0],
          name: '不展示'
        },
        {
          value: retData.sexY[1],
          name: '展示'
        }
        // {
        //   value: 1548,
        //   name: '搜索引擎'
        // }
      ]
        }
      ]



        }
        chart.setOption(options)
      })
    },

    initChart3() {
  const chart = echarts.init(document.getElementById('chart3'))
  axios.get('http://localhost:8080/product/echarts2').then(res => {
    let retData = res.data.data;
    const options = {
      title: {
        text: '商品价格表'
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b}: {c}'
      },
      legend: {
        data: ['商品价格']
      },
      xAxis: {
        type: 'category',
        data: retData.sexX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '商品价格',
          type: 'bar',
          data: retData.sexY
        }
      ]
    }
    chart.setOption(options)
  })
}
  }
}
</script>

<style scoped>
</style>


